<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        header {
            height: 2rem;
            background-color: #ff0;
            width: 100%;
            position: fixed;
            top: 0;
        }

        footer {
            height: 1rem;
            background-color: #ff0;
            width: 100%;
            position: fixed;
            bottom: 0;
        }

        main {
            position: fixed;
            top: 2rem;
            bottom: 1rem;
            /* left: 0;
            right: 0; */
            width: 100%;
            background-color: #f00;
            display: flex;
        }

        nav {
            width: 1rem;
            background-color: #0f0;
            line-height: .8rem;
            overflow-y: scroll;
            flex-shrink: 0;
        }
        section {
            flex-grow: 1;
            overflow-y: scroll;
            overflow-x: hidden;
        }
    </style>
</head>

<body>

    <!-- 
        header 固定高度  使用了固定定位     2rem
        footer 固定高度  使用了固定定位     1rem

        main   固定定位    top:2rem;bottom:1rem       main占据剩余所有的高度

            main写了弹性布局   高度会继承(nav和section都会继承高度)   
            nav section   overflow-y:scroll

     -->

    <header></header>
    <main>
        <nav>
            <ul>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                <li>
                    <a href="">home</a>
                </li>
                </li>
            </ul>
        </nav>
        <section>
            <h1>1111111111111111111111111111111111111111111111111111111</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
            <h1>11</h1>
        </section>
    </main>
    <footer></footer>

</body>

</html>